<script lang="ts" setup>
import {
    Avatar,
    Badge,
    Breadcrumb,
    Button,
    type ItemType,
    Layout,
    LayoutContent,
    LayoutHeader,
    LayoutSider,
    Menu,
    Tooltip,
    message,
} from 'ant-design-vue'
import {
    ApartmentOutlined,
    AppstoreOutlined,
    CodeSandboxOutlined,
    HomeOutlined,
    MenuFoldOutlined,
    MenuOutlined,
    MenuUnfoldOutlined,
    ToolOutlined,
    UsbOutlined,
    UserOutlined,
} from '@ant-design/icons-vue'
import { getMetaTitleFromRoute } from '~/router'
import { ExexecuteList } from '../types/apis/execute'
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface'

const globalConfigStore = useGlobalConfigStore()
const permissionStore = usePermissionStore()
const route = useRoute()
const router = useRouter()

const openKeys = ref<string[]>([])
const selectedKeys = ref<string[]>([])
const breadcrumb = ref<[string, string][]>([])
const [collapsed, toggleCollapsed] = useToggle()

const items = reactive<ItemType[]>([
    {
        key: '/home',
        icon: () => h(HomeOutlined),
        title: '首页',
        label: '首页',
    },
    {
        key: 'common-menu',
        icon: () => h(MenuOutlined),
        title: '公共菜单',
        label: '公共菜单',
        children: [
            {
                key: '/common-menu/project-manager',
                title: '项目管理',
                label: '项目管理',
            },
            {
                key: '/common-menu/environment-manager',
                title: '环境管理',
                label: '环境管理',
            },
            {
                key: '/common-menu/user-manager',
                title: '用户管理',
                label: '用户管理',
            },
            {
                key: '/common-menu/role-manager',
                title: '角色管理',
                label: '角色管理',
            },
            {
                key: '/common-menu/database-manager',
                title: '数据库管理',
                label: '数据库管理',
            },
            {
                key: '/common-menu/proxy-manager',
                title: '代理管理',
                label: '代理管理',
            },
        ],
    },{
        key: 'general-configuration',
        icon: () => h(AppstoreOutlined),
        title: '通用配置',
        label: '通用配置',
        children: [
            {
                key: '/general-configuration/before-case',
                title: '前置用例配置',
                label: '前置用例配置',
            },
        ],
    },
    {
        key: 'interface-automation',
        icon: () => h(UsbOutlined),
        title: '接口自动化',
        label: '接口自动化',
        children: [
            // {
            //     key: '/interface-automation/manager',
            //     title: '接口管理(待开发=>postman)',
            //     label: '接口管理(待开发=>postman)',
            // },
            {
                key: '/interface-automation/case',
                title: '用例管理',
                label: '用例管理',
            },
        ],
    },
    {
        key: 'ui-automation',
        icon: () => h(AppstoreOutlined),
        title: 'UI自动化',
        label: 'UI自动化',
        children: [
            // {
            //   key: '/ui-automation/elements',
            //   title: '元素库管理',
            //   label: '元素库管理',
            // },
            {
                key: '/ui-automation/case',
                title: '用例管理',
                label: '用例管理',
            },
        ],
    },
    {
        key: 'mix-automation',
        icon: () => h(AppstoreOutlined),
        title: '混合自动化',
        label: '混合自动化',
        children: [
            {
                key: '/mix-automation/case',
                title: '用例管理',
                label: '用例管理',
            },
        ],
    },
    {
        key: 'stress-test',
        icon: () => h(ApartmentOutlined),
        title: '压测引擎',
        label: '压测引擎',
        children: [
            {
                key: '/stress-test/manager',
                title: '用例管理',
                label: '用例管理',
            },
        ],
    },
    {
        key: 'report',
        title: '测试报告',
        label: '测试报告',
        icon: () => h(CodeSandboxOutlined),
        children: [
            {
                key: '/report/stress',
                title: '压力测试',
                label: '压力测试',
            },
            {
                key: '/report/interface',
                title: '接口测试',
                label: '接口测试',
            },
            {
                key: '/report/ui',
                title: 'UI测试',
                label: 'UI测试',
            },
            {
                key: '/report/mix',
                title: '混合测试',
                label: '混合测试',
            },
        ],
    },
    {
        key: 'test-plan',
        title: '测试计划',
        label: '测试计划',
        icon: () => h(ToolOutlined),
        children: [
            {
                key: '/test-plan/time-plan',
                title: '定时计划',
                label: '定时计划',
            },
        ],
    },
])

function handleMenuClick(info: MenuInfo) {
    router.push(info.key.toString())
}

watch(
    () => route,
    () => {
        if (route.fullPath !== '/') {
            openKeys.value = [route.fullPath.split('/')[1]]
        }
        if (route.fullPath === '/') {
            selectedKeys.value = ['/']
            breadcrumb.value = [['首页', '/']]
        } else {
            const arr = route.fullPath.split('/')
            selectedKeys.value = [`/${arr[1]}/${arr[2]?.replace(/\?.+/, '')}`]
            breadcrumb.value = getMetaTitleFromRoute(arr)
        }
    },
    {
        deep: true,
        immediate: true,
    },
)

//退出登录
const { get } = useCustomFetch(`/account-service/api/v1/account/logout`, {
    immediate: false,
    afterFetch(ctx: AfterFetchContext<IBasic<any>>) {
        if (ctx.data && ctx.data.code === 0) {
            message.success('退出成功')
            // 清除 Pinia 中的数据
            globalConfigStore.setLoginToken('')
            globalConfigStore.config.projectId = null as any
            globalConfigStore.config.projectDatas = null as any
            globalConfigStore.config.projectListDataProxy = null as any
            // 清除 localStorage 中的数据
            localStorage.clear()
            // 清除权限数据
            permissionStore.roles = '' as any
            // 跳转到首页
            router.push('/')
        } else if (ctx.data && ctx.data.code === 500) {
            // 处理 token 失效情况，例如跳转到登录页
            message.error('登录已失效，请重新登录')
            // 清除 Pinia 中的数据
            globalConfigStore.setLoginToken('')
            globalConfigStore.config.projectId = null as any
            globalConfigStore.config.projectDatas = null as any
            globalConfigStore.config.projectListDataProxy = null as any
            // 清除 localStorage 中的数据
            localStorage.clear()
            // 清除权限数据
            permissionStore.roles = '' as any
            router.push('/') // 假设登录页路由为 '/login'
        } else {
            message.error('退出失败')
        }
        return ctx
    },
})

const logout = async () => {
    await nextTick()
    get().execute()
}

</script>

<template>
    <Layout min-h="100vh 100dvh!">
        <LayoutSider v-model:collapsed="collapsed" :trigger="null" collapsible style="z-index: 99;">
            <h1 cursor-pointer flex="~  justify-center" transition="opacity duration-300"
                class="my opacity-100 hover:opacity-65">
                <RouterLink class="text-white!" to="/">
                    {{ !collapsed ? '麟芯测试云平台' : '云测' }}
                </RouterLink>
            </h1>
            <Menu v-model:selectedKeys="selectedKeys" v-model:open-keys="openKeys" theme="dark" mode="inline" :items="items"
                @click="handleMenuClick" />
        </LayoutSider>
        <Layout>
            <LayoutHeader p="x!" flex items-center justify-between>
                <div flex items-center>
                    <div cursor-pointer px text-xl hover="text-blue" @click="() => toggleCollapsed()">
                        <menu-unfold-outlined :style="{color: globalConfigStore.openLight ? '#333333' : '#FFFFFF'}" v-if="collapsed" />
                        <menu-fold-outlined  :style="{color: globalConfigStore.openLight ? '#333333' : '#FFFFFF'}"  v-else />
                    </div>

                    <Breadcrumb>
                        <Breadcrumb.Item v-for="([title, path], index) in breadcrumb" :key="path">
                            <RouterLink v-if="path !== 'unreachable' && index !== breadcrumb.length - 1" :to="path">
                                {{ title }}
                            </RouterLink>
                            <span v-else>{{ title }}</span>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>

                <div flex items-center space-x-4>
                    <LayoutHeaderConfig />
                    <Tooltip color="white">
                        <template #title>
                            <Button type="link" @click="logout">退出登录</Button>
                        </template>
                        <Badge :count="1">
                            <Avatar shape="circle">
                                <template #icon>
                                    <UserOutlined />
                                </template>
                            </Avatar>
                        </Badge>
                    </Tooltip>
                </div>
            </LayoutHeader>
            <LayoutContent> 
                <slot />
            </LayoutContent>
        </Layout>
    </Layout>
</template>

